import React, { useEffect, useState } from 'react';
import moment from 'moment';
import EchartsWrap from '../../../../widgets/EchartsWrap';
import * as echarts from 'echarts';
import styles from './InvestPoint.less';

const charts = {
  unit: '万元',
  names: ['投资指标'],
  lineX: [],
  value: [[50, 137, 66, 72, 166]],
};
const color = ['rgba(47, 176, 255'];
const lineY = [];
const options = {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    show: false,
  },
  grid: {
    top: '14%',
    left: '4%',
    right: '4%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: charts.lineX,
    axisLabel: {
      textStyle: {
        color: 'rgb(255,255,255,0.45)',
      },
      formatter: function(params) {
        return params.split(' ')[0];
      },
    },
  },
  yAxis: {
    name: charts.unit,
    type: 'value',
    axisLabel: {
      formatter: '{value}',
      textStyle: {
        color: 'rgb(255,255,255,0.45)',
      },
    },
    splitLine: {
      lineStyle: {
        color: 'rgb(255,255,255,0.12)',
      },
    },
    axisLine: {
      lineStyle: {
        color: 'transparent',
      },
    },
  },
  series: lineY,
};

const InvestPointChart = () => {
  const [dataOption, setDataOption] = useState(options);

  function initChart() {
    for (let i = 0; i < charts.names.length; i += 1) {
      let colorIndex = i;
      if (i > color.length - 1) {
        colorIndex = color.length - 1;
      }

      const data = {
        name: charts.names[i],
        type: 'line',
        color: color[colorIndex] + ')',
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: color[colorIndex] + ', 0.3)',
                },
                {
                  offset: 0.8,
                  color: color[colorIndex] + ', 0)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        symbol: 'circle',
        symbolSize: 5,
        data: charts.value[i],
      };
      lineY.push(data);
    }

    const now = moment();
    for (let i = -4; i <= 0; i += 1) {
      const day = now.clone().add(i, 'd');
      charts.lineX.push(day.format('MM-DD'));
    }

    setDataOption({ ...dataOption });
  }

  useEffect(() => {
    initChart();
  }, []);

  return (
    <div className={styles.wrap}>
      <div style={{ width: 330, height: 165 }}>
        <EchartsWrap option={dataOption} style={{ width: '330px', height: '165px' }} />
      </div>
    </div>
  );
};

export default InvestPointChart;
